<template>
  <view class="pages header-bg">
    <!-- 标题栏 start -->
    <!-- <view class="cu-custom" :style="[{height: CustomBar +'px'}]">
      <image :src="imgBaseUrl + 'wallet-bg.png'" mode="aspectFill"></image>
      <view class="cu-bar fixed" :style="style">
        <view class="action text-white" @click="back">
          <text class="cuIcon-back"></text>
        </view>
        <view class=" content-text" :style="[{top:StatusBar + 'px'}]">
          <view class="text-white font-36">{{i18n['积分商城']}}</view>
        </view>
      </view>
    </view> -->
    <!-- #ifdef MP-WEIXIN -->
    <!-- <view class="rules" :style="[{top: CustomBar + 5 +'px'}]">
      <view @click="toRule" class="tab-item font-32 active text-white padding-right">{{i18n['兑换规则']}}</view>
    </view> -->
	<!-- 标题栏 end -->
    <!-- #endif -->
	<fu-loading v-if="isShowLoading"></fu-loading>
	<block v-else>
		<view class="bg-white margin-lr-sm padding-lg radius-16 margin-top-56" style="height: 248rpx;">
			<view class="flex align-center justify-between padding-bottom-lg">
				<view class="flex-sub solid-right">
					<view class="fu-fs28 text-666">积分余额</view>
					<view class="text-bold fu-fs56 text-center text-333 margin-top-32">{{user_msg.score || 0}}
					</view>
				</view>
			</view>
		</view>
		<!-- 积分 end -->
		<view class="margin-lr-sm padding-lr-sm margin-top flex align-center justify-between">
			<view class="flex align-center text-bold text-333 fu-fs32 ">近30天记录</view>
			<view class="text-999 text-sm" @tap="handleJump" data-url="/pages/integral/myintegral/my-integral/index">
				查看全部
				<text class="lg text-999 cuIcon-right"></text>
			</view>
		</view>
		<view class="detaiLiat">
			<scroll-view scroll-y :style="{ height: 'calc(100vh - 314rpx)' }"
				@scrolltolower='loadMore'>
				<view class="list">
					<view class="list-wrap">
						<view class="ongg" v-for="(item, index) in list" :key="index">
							<view class="buy-left">
								<view class="share-right" style="overflow: hidden;">
									<view class="desc text-cut">{{ item.remark }}</view>
									<view class="riqiblls">{{ item.create_time }}</view>
								</view>
							</view>
							<view class="price-right">
								<text v-if="item.after_score- item.before_score >0"
									class="add">+{{ item.change_score }}</text>
								<text v-else class="jian">{{ item.change_score }}</text>
							</view>
						</view>
					</view>
				</view>
				<!-- 空布局 -->
				<fu-empty-ui v-if="list.length == 0 && isInit"></fu-empty-ui>
				<!-- 加载状态 start -->
				<uni-load-more v-if="list.length > 5"  :status="status"></uni-load-more>
				<!-- 加载状态 end -->
			</scroll-view>
		</view>
	</block>

    <!-- 网络检测 start -->
    <fu-notwork></fu-notwork>
    <!-- 网络检测 end -->
  </view>
</template>

<script>
  import FuIntegralBlock from '../../components/fu-integral-block/fu-integral-block.vue';
  export default {
	  components: {
		FuIntegralBlock,
	  },
    data() {
      return {
        interval: 3000, //自动切换时间间隔
        duration: 800, //滑动动画时长
        user_msg: {}, //积分

        CustomBar: this.CustomBar, //标题栏高度
        StatusBar: this.StatusBar, //状态栏高度
        integral: 0, //    积分
        status: "more", //  加载状态  more:有更多数据  noMore:已加载全部数据  loading:数据加载中
        isShowLoading: true, // 页面初始化 加载loading
        page: 1, //页数
        size: 10, //一页显示几条
        list: [], //商品列表
        srollList: [], //跑马灯
        broadcastData: [],
        broadcastStyle: {
        	speed: 1, //每秒1个字
        	font_size: "24", //字体大小(rpx)
        	text_color: "#333", //字体颜色
        	// back_color: "red", //背景色

        },
        timer:null,
		isInit: false,
		heightTop: 0
      };
    },
    onLoad() {
      let that = this;
      // this.timer= setInterval(function(){
    //         if(that.srollList && that.srollList.length>0){
    //           let temp = that.srollList.shift()
    //           that.srollList.push(temp)
    //           that.$forceUpdate()
    //         }
    //     },1500);

    },
    onUnload() {
      clearInterval(this.timer)
    },
    onShow() {



      if (global.userInfo && global.userInfo.id) {
        this.get_user_info()
        // this.get_integral_list()
        this.loadDataList()
      } else {
         uni.navigateBack()
      }
    },
    /**
     * @description 下拉加载
     */
    onPullDownRefresh() {
      this.status = 'more';
      this.page = 1;
      this.loadDataList();
    },
    onReachBottom() {
      
    },
    computed: {
      style() {
        let StatusBar = this.StatusBar;
        let CustomBar = this.CustomBar;
        let opacity = this.opacity;
        return `height:${CustomBar}px;padding-top:${StatusBar}px;background: rgba(255,255,255,${opacity})`;
      },

    },
    methods: {
		toQd(){
			this.$message.info('暂未开放，敬请期待')
		},
		loadMore() {
			this.loadDataList(); // 搜索方法
		},
      //
      /**
       * @description 获取积分 跑马灯
       */
      get_integral_list() {
        this.$api.post(global.apiUrls.postIntegralHistorys,{
			type:'Completed'
		})
          .then(res => {
            console.log(res, '滚动信息');
            if (res.data.code == 1) {
              this.srollList = res.data.data;
            }
          });
      },
      back() {
        uni.navigateBack();
      },
      /**
       * @description 获取我的详细信息
       */
      get_user_info() {
        this.$api.post(global.apiUrls.postGetUserInfo, {
            user_id: global.userInfo.id
          })
          .then(res => {
            console.log(res, '用户信息');
            if (res.data.code == 1) {
              this.user_msg = res.data.data;
            }
			this.isShowLoading = false
          }).catch(() => {
			  this.isShowLoading = false
		  });
      },
      /**
       * @description 商品列表请求
       */
      loadDataList() {
        //若数据已加载完毕 就不让再加载
        if (this.status != "more") return;
        this.status = "loading";
        let data = {
          page: this.page,
          size: this.size,
          type: 0,
        };
        console.log('请求的参数',data)
        this.$api.post(global.apiUrls.postGetScoreList, data)
          .then(res => {
            console.log('兑换商品: ', res);
            //数据请求完毕  关闭loading
            this.isShowLoading = false
            if (res.data.code == 1) {
              var totalSize = res.data.data.total;
              var curPageData = res.data.data.data;
              if (this.page == 1) this.list = [];
              this.list = this.list.concat(curPageData);
              if (this.list.length < totalSize) {
                this.status = 'more';
                this.page++;
              } else {
                this.status = 'noMore';
              }
            } else {
              this.$message.info(res.data.msg);
            }
			this.isInit = true
            //数据请求完毕  关闭下拉加载
            uni.stopPullDownRefresh();
          })
          .catch(err => {
            //数据请求完毕  关闭loading/下拉加载
            this.isShowLoading = false
            uni.stopPullDownRefresh();
          });
      },
      /**
       * @param {Object} item 去商品详情
       */
      navToDetail(item) {
        uni.navigateTo({
          url: `/pages/integral/integralgoods/integral-goods-detail/index?goods_id=${item.id}&sku_id=${item.sku_id}&activity_id=${item.activity_id}&integral=${this.user_msg.score}`,
        });
      },
      /**
       * @description 跳转到兑换规则
       */
      toRule() {
        uni.navigateTo({
          url: "/pages/integral/myintegral/integral-points-rules/index",
        });
      },
    }
  };
</script>

<style lang="scss" scoped>
  .font-32{
    font-size: 32rpx;
    font-weight: 500;
    color: #FFFFFF;

  }
  .font-36{
    font-size: 36rpx;
    font-weight: 500;
    color: #FFFFFF;

  }


  .notice-content {
  	width: 683upx;
  	height: 54upx;
  	border-radius: 13upx;
  	background-color: #CBCBCB;
  	margin-top: 24upx;
  	padding: 0 8upx;
  	opacity: 0.63;
  	display: flex;
  	align-items: center;

  	.text-wrap,#notice {
  		font-size: 28upx;
  		opacity: 0.8;
  		white-space: nowrap;
  	}

  	.text-wrap{
  		width: 528upx;
  		overflow: hidden;
  	}

  	#notice{
  		display: inline-block;
  	}

  	image {
  		width: 36upx;
  		height: 36upx;
  		margin-right: 17upx;
  		opacity: 0.8;
  	}
  }

  // 背景 start
  .pages {
    background-color: #FAF7FA;
    height: 100%;
	overflow: hidden;
	&.header-bg {
		background-image: url($IMG_BASE_URL + 'integral-bg.png');
		background-repeat: no-repeat;
		background-size: 100%;
	}
  }
  .rules{
    position: fixed;
    right: 0rpx;
    z-index: 99;
  }
  // 背景 end
  .cu-custom {
    overflow: hidden;
    position: fixed;
    // height: 176rpx;
    width: 100%;
    line-height: 176rpx;
    z-index: 999;

    .content-text {
      position: absolute;
      text-align: center;
      width: calc(100% - 220px);
      left: 0;
      right: 0;
      bottom: 0;
      top: 20rpx;
      margin: auto;
      height: 30px;
      font-size: 16px;
      line-height: 30px;
      cursor: none;
      pointer-events: none;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    image {
      width: 200%;
      height: 500rpx;
    }
  }

  // 积分 start
  .header-wrap {
    height: 500rpx;
    position: relative;
    // overflow: hidden;
    width: 100%;

    image {
      width: 100%;
      height: 500rpx;
      border-radius: 0 0 10rpx 10rpx;
    }

    .header-bg {
      position: absolute;
      z-index: 5;
    }

    .header-info {
      position: relative;
      z-index: 6;
      width: 100%;
      top: -320rpx;
      text-align: center;
      font-size: 28rpx;
      color: #ffffff;
      // margin-top: 30rpx;

      .header-money {
        font-size: 60rpx;
      }

      .header-title {
        margin-top: 20rpx;
      }
    }
  }

  // 积分 end
  // 分类导航 start
  .item-wrap {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: 0 24rpx;
    box-sizing: border-box;
    margin-top: -120rpx;

    .item-content {
      height: 150rpx;
      border-radius: 24rpx;
      background: #ffffff;
      text-align: center;
      box-shadow: 2rpx 2rpx 1rpx rgba(0, 0, 0, 0);

      image {
        width: 70rpx;
        height: 70rpx;
      }

      .item-title {
        font-size: 24rpx;
      }

      .item-line {
        width: 1rpx;
        height: 44rpx;
        background: #eeeeee;
      }
    }
  }

  // 分类导航 end

  // 跑马灯 start
  .uni-padding-wrap {
    margin: 15rpx 0;
    height: 80rpx !important;
    height: 100%;
    overflow: hidden;
    margin-top: 32rpx;
  }
   /deep/   .uni-swiper-slide-frame{
    height: 80rpx !important;
  }

  .sroll-box {
    border-radius: 20rpx;
    background-color: #FEF2F2;
    line-height: 80upx;
    height: 80upx;
    font-size: 28upx;
    color: #333333;
    display: flex;
    // align-items: center;
    margin: 20rpx 24upx;
    position: relative;
    z-index: 2;
    padding:0 24rpx;
    margin-top: 0;

    .shoping {
      letter-spacing: 1rpx;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .sroll_img{
      margin-top: 15rpx;
      height: 50rpx;
      width: 50rpx;
	  min-width: 50rpx;
      border-radius:50%;
    }


  }

  // 跑马灯 end
  // 积分描述语 start
  .title-desc {
    margin-top: 40rpx !important;
    line-height: 70upx;
    height: 70upx;
    font-size: 28upx;
    color: #333333;
    display: flex;
    margin: 20rpx 32upx;
    letter-spacing: 2rpx;

    .text-title {
      font-size: 34rpx;
      padding: 0 15rpx;
    }
    .desc_right{
      height: 40rpx;
      font-size: 28rpx;
      font-weight: 400;
      line-height: 40rpx;
      color: #666666;
      padding-left: 10rpx;

    }

    image {
      height: 34rpx;
      width: 31rpx;
      margin-top: -4rpx;
    }
  }

  // 积分描述语 end
  .padding-lr-sm {
    padding-left: 14rpx;
    padding-right: 14rpx;
  }
  
  .detaiLiat {
  	width: calc(100% - 48rpx);
  	margin-left: 24rpx;
  
  	margin-top: 32rpx;
  	.list {
  		border-radius: 24rpx;
  		width: 100%;
  		background-color: #fff;
  		
  
  		.list-wrap {
  			// width: 702rpx;
  			margin: 0 32rpx;
  		}
  
  		.ongg {
  			height: 132rpx;
  
  			margin: 0 auto;
  			// padding:0 32rpx;
  			box-sizing: border-box;
  			display: flex;
  			justify-content: space-between;
  			align-items: center;
  			border-bottom: 1rpx solid #eee;
  			overflow: hidden;
  
  			.buy-left {
  				flex: 1;
  				display: flex;
  				justify-content: flex-start;
  				align-items: center;
  				overflow: hidden;
  
  				.share-right {
  					// padding-top: 10rpx;
  					font-size: 30rpx;
  					font-family: PingFang SC;
  					font-weight: 500;
  					line-height: 53rpx;
  					flex: 1;
  
  					.desc {
  						line-height: 42rpx;
  						font-size: 28rpx;
  						font-family: 'PingFang SC';
  						font-weight: 400;
  						color: #333333;
  					}
  
  					.riqiblls {
  						line-height: 32rpx;
  						margin-top: 8rpx;
  						font-size: 24rpx;
  						font-family: 'PingFang SC';
  						font-weight: 400;
  						color: #bfbfbf;
  					}
  				}
  			}
  
  			.price-right {
  				padding-right: 10rpx;
  				font-size: 32rpx;
  				font-family: 'Oswald';
  				font-weight: 400;
  
  				opacity: 1;
  
  				.add {
  					color: #FF6F27;
  				}
  
  				.jian {
  					color: #333333;
  				}
  			}
  		}
  	}
  }

</style>
